<script setup>
import { ref } from 'vue';
import { getProductById } from '../../../apis/user/product';
import { addProductToCar } from '../../../apis/user/car';
import { useRoute, useRouter } from 'vue-router';
import { message,Modal } from 'ant-design-vue';
import { LeftOutlined  } from '@ant-design/icons-vue';

import {useUserInfo} from '@/store/useUserInfo';

const user = useUserInfo();
const route = useRoute();
const router = useRouter();
const product = ref({});
function initProduct() {
  if (!route.query.id) {
    router.push({
      name: 'Home'
    })
    return;
  }
  getProductById(route.query.id).then(res => {
    product.value = res.data;

  })
}
function formatMark(mark) {
  if (mark === 1) {
    return '新品'
  } else if (mark === 2) {
    return '招牌'
  } else if (mark === 3) {
    return '推荐'
  } else {
    return '推荐'
  }
}

function formatType(type) {
  if (type === 1) {
    return '主食'
  } else if (type === 2) {
    return '饮料'
  } else if (type === 3) {
    return '小吃'
  } else if (type === 4) {
    return '水果'
  } else {
    return ''
  }
}

function addCar(){
  if(!user.isLogin){
    Modal.confirm({
      title: '你尚未登录，请先登录用户！',
      content: '',
      centered: true,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        router.push({
          name:'UserLogin',
        })
      }
    });
    return;
  }
  addProductToCar({
    product_id:product.value.product_id,
    num:num.value
  }).then(res=>{
    if(res.code === 0){
      message.success('加入购物车成功！')
    }else{
      message.error('加入购物车失败！')
    }
  })
}

const num = ref(1);

initProduct();
</script>


<template>
  <div class="detail">
    <a-card :bordered="false" class="card">
      <template #title>
        <LeftOutlined @click="router.back()" />
        <span style="padding-left: 10px;">外卖详情</span>

      </template>
      <div class="box">
        <a-image :width="500" :height="500" :src="product.image"
          fallback="" />
        <div class="detail-content">
          <div>
            <div class="title">
              {{ product.name }}
            </div>
            <div>
              <a-tag color="orange" style="font-size: 16px;padding: 5px 20px;"
                v-if="[1, 2, 3].includes(product.mark)">{{ formatMark(product.mark) }}</a-tag>
              <a-tag style="font-size: 16px;padding: 5px 20px;" color="green">{{ formatType(product.type) }}</a-tag>
            </div>
            <div class="desc">
              {{ product.desc }}
            </div>
            <div style="display: flex;align-items: flex-end;">
              <div class="current_price">
                ￥{{ product.current_price ? Number(product.current_price).toFixed(2) : Number(product.price).toFixed(2)
                }}
              </div>
              <div class="price" v-if="product.current_price">
                ￥{{ Number(product.price).toFixed(2) }}
              </div>
            </div>
          </div>
          <div>
            <div style="padding-bottom: 20px;font-size: 20px;display: flex;align-items: center;">
              数 量： <a-input-number size="large" :min="1" :max="100" v-model:value="num" /> 
            </div>
            <a-space>
              <a-button type="primary" style="width: 200px;height: 50px;" @click="addCar">加入购物车</a-button>
              <a-button  style="width: 200px;height: 50px;" @click="router.back()">返 回</a-button>
            </a-space>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.detail {
  display: flex;
  justify-content: center;
  align-items: center;

  .card {
    width: 1100px;

    .box {
      display: flex;

      .detail-content {
        padding: 10px;
        width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          width: 100%;
          font-size: 32px;
          font-weight: bold;
          color: black;
          white-space: nowrap;
          /* 禁止换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          display: flex;
          align-items: center;
        }

        .desc {
          padding-top: 20px;
          font-size: 18px;
        }

        .current_price {
          color: #ff5000;
          font-size: 25px;
          font-weight: bold;
        }

        .price {
          font-size: 20px;
          margin-left: 5px;
          text-decoration: line-through;
        }
      }

    }
  }
}
</style>